<script type="text/x-template" id="poster-merge">
    <el-form :model="posterMerge" label-width="100px" :rules="rules" ref="posterMergeForm">
        <el-form-item label="角标位置" prop="position">
            <el-select v-model="posterMerge.position">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="上传角标">
            <el-upload class="upload-demo"
                       accept="image/jpeg,image/jpg,image/png"
                       :limit="1"
                       drag
                       :auto-upload="false" ref="uploadIcon" action="" :on-change="uploadSectionFileForIcon" :on-remove="removeImageForIcon" list-type="picture-card">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <#--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
        </el-form-item>
        <el-form-item label="上传海报">
            <el-upload class="upload-demo" accept="image/jpeg,image/jpg,image/png"
                       :limit="1"
                       drag
                       :auto-upload="false" ref="uploadPoster" action="" :on-change="uploadSectionFileForPoster" :on-remove="removeImageForPoster" list-type="picture-card">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <#--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->

                <#--<el-button size="small" type="primary" v-show="isUploadShowHide">点击上传</el-button>-->
                <#--<div slot="tip" class="el-upload__tip" v-show="isUploadShowHide" style="margin-top: -40px;idth: 300px;margin-left: 100px;text-align: left;color: red;">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input v-model.trim="posterMerge.title"></el-input>
        </el-form-item>
        <el-form-item label="子标题" prop="subTitle">
            <el-input v-model.trim="posterMerge.subTitle"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="detail">
            <el-input v-model.trim="posterMerge.detail"></el-input>
        </el-form-item>
        <el-form-item label="评分" prop="score">
            <el-input v-model.trim="posterMerge.score"></el-input>
        </el-form-item>
        <el-form-item label="左侧绘制起始" prop="drawLeft">
            <el-input-number :min="0" :max="2000" :step="1"
                             v-model.number="posterMerge.drawLeft"/>
        </el-form-item>
        <el-form-item label="绘制区域宽度" prop="drawRegionWidth">
            <el-input-number :min="200" :max="2000" :step="1"
                             v-model.number="posterMerge.drawRegionWidth"/>
        </el-form-item>
        <el-form-item v-if="posterShow">
            <img referrerpolicy="no-referrer"  :src="poster_url"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click.native="submit" :loading="formLoading">确定</el-button>
        </el-form-item>
    </el-form>
</script>

<script>
    Vue.component('poster-merge', {
        template: '#poster-merge',
        data: function () {
            return {
                poster_url:'',
                formLoading: false,
                posterShow: false,
                isUploadShowHide: true,
                posterMerge:{
                    position: 'left_top',
                    iconBase64Str:'',
                    posterBase64Str:'',
                    title:'《星球大战: 天行者崛起》',
                    subTitle:'影视专区最新上线',
                    detail:'在卢克·天行者化为绝地英灵的一年后，残存的抵抗势力将再次面对 第一秩序。同时，绝地和西斯之间的大战将天行者的传奇带到最后。',
                    score: '9.7',
                    drawLeft: 70,
                    drawRegionWidth: undefined,
                },
                options:[
                    {label : '左上',value: 'left_top'},
                    {label : '右上',value:'right_top'},
                ],
                rules: {
                    position: [
                        {required: true, message: '请选择角标位置'}
                    ],
                    title: [
                        {required: true, message: '请输入标题'}
                    ],
                    subTitle: [
                        {required: true, message: '请输入子标题'}
                    ],
                    detail: [
                        {required: true, message: '请输入简介'}
                    ],
                },
                urls: {
                    //分页数据接口
                    merge: '/v1/aiPoster/merge.html',
                    justMerge: '/v1/aiPoster/justMerge.html',
                    mergePoster: '/v1/aiPoster/mergePoster.html',
                },
            };
        },
        methods: {
            uploadSectionFileForIcon(file, fileList) {
                var _this = this
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                console.log(file.raw)
                reader.onload = function(e){
                    this.result // 这个就是base64编码了
                    console.log(this.result)
                    _this.posterMerge.iconBase64Str = _this.trimHeader(this.result);
                }
            },
            trimHeader(base64) {
              return base64.replace(/\r|\n/g, '').replace('data:image/jgp;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpeg;base64,','');
            },
            uploadSectionFileForPoster(file, fileList) {
                var _this = this
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                console.log(file.raw)
                reader.onload = function(e){
                    this.result // 这个就是base64编码了
                    console.log(this.result)
                    _this.posterMerge.posterBase64Str = _this.trimHeader(this.result);
                }

            },
            removeImageForIcon(file, fileList){
                this.posterMerge.iconBase64Str =''
            },
            removeImageForPoster(file, fileList){
                this.posterMerge.posterBase64Str = ''
            },
            cancel(){

            },
            submit(){
                this.$refs.posterMergeForm.validate(function (valid) {
                    if (valid) {
                        if (this.posterMerge.posterBase64Str == undefined || this.posterMerge.posterBase64Str == ''){
                            this.$message({type: 'warning', message: "海报地址能不能为空"})
                        }else {
                            this.ajax(this.urls.mergePoster, {
                                jsonStr: JSON.stringify(this.posterMerge)
                            }, function (result) {
                                if (result.code == 0) {
                                    this.$message({
                                        type: 'success',
                                        message: "操作成功！"
                                    })
                                    this.poster_url = result.data
                                    this.posterShow = true

                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: result.msg
                                    })
                                }
                            }.bind(this))
                        }
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            }


        },
        watch: {},
        mounted() {

        },
        created() {
        }
    })
</script>

<style>

</style>